<template>
    <div class="component-people-select">
        <div class="people-picker-box">
            <input class="picker text-center" placeholder="搜索购买者" v-model="searchKey" @focus="onPeopleSelectFocus" />
        </div>
        <div class="options-box" v-if="peopleSelectOptionsVisible && userList.length">
            <div class="inner">
                <div class="item after-line" @click="onPeopleChange(item)" v-for="(item, index) in userList" :key="index">
                    {{item.name ? item.name : item.nickname}} {{item.mobile}}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    WatchDelay,
} from '@/lib/utils';
import store from '@/store';

import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'PeopleSelect',
})
export default class PeopleSelect extends Vue {
    @Prop({
        type: Object,
        default() {
            return {
                id: null,
                nickname: '',
            };
        },
    }) public value: any;

    public searchKey = '';
    public peopleSelectOptionsVisible = false;
    public selectedPeople = null;

    public get userSearchMap() {
        return store.state.manage.userSearchMap;
    }

    public get userList() {
        return this.userSearchMap[this.searchKey]
            ? [ { id: null, nickname: '暂无结果' } ].concat(this.userSearchMap[this.searchKey])
            : [ { id: null, nickname: '暂无结果' } ];
    }

    @WatchDelay('searchKey', 500)
    @Watch('searchKey')
    public onSearchKeyChange(val: any) {
        if (this.searchKey && (!this.selectedPeople || (this.selectedPeople.nickname !== this.searchKey))) {
            this.getSearchPeopleList();
        }
    }

    public onPeopleSelectFocus() {
        this.peopleSelectOptionsVisible = true;
    }

    public onPeopleSelectBlur() {
        this.peopleSelectOptionsVisible = false;
    }

    public onPeopleChange(item: any) {
        // console.log('item', item);
        this.selectedPeople = item;
        this.searchKey = this.selectedPeople.name || this.selectedPeople.nickname;
        this.onPeopleSelectBlur();
        this.$emit('input', this.selectedPeople);
    }

    public async getSearchPeopleList() {
        store.commit('utils/startRequest');
        await store.dispatch('manage/searchUser', {
            search: this.searchKey,
        });
        store.commit('utils/endRequest');
        // if (!this.selectedReferrList.length) {
        //     wx.showToast({
        //         title: '暂无推荐人可选',
        //         icon: 'none',
        //     });
        // }
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.component-people-select {
    position: relative;
    padding: 12px;
    .people-picker-box {
        box-sizing: border-box;
        width: 100%;
        padding: 10rpx 10px;
        border: 2rpx solid #BBBBBB;
        border-radius: 40rpx;
        .picker {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 0 60rpx;
            &::before {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-family: 'iconfont';
                content: "\e610";
                font-size: 32rpx;
                color: @grey-color;
                pointer-events: none;
            }
        }
    }
    .options-box {
        box-sizing: border-box;
        position: absolute;
        z-index: 2;
        top: 96rpx;
        left: 24rpx;
        width:  375 * 2 - 48rpx;
        background-color: @white-color;
        border: 2rpx solid #BBBBBB;
        border-radius: 10rpx;
        .inner {
            width: 100%;
            max-height: 500rpx;
            overflow-y: scroll;
            .item {
                position: relative;
                box-sizing: border-box;
                width: 100%;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

</style>
